<template>
    <div class="payment">
        <div class="pay-header">
            <tab>
                <tab-item selected @on-item-click="paymentEvent(null)">全部</tab-item>
                <tab-item @on-item-click="paymentEvent('expense')">支出</tab-item>
                <tab-item @on-item-click="paymentEvent('income')">收入</tab-item>
            </tab>
        </div>
        <div class="panel-cash">
            <div v-for="(pay, idx) in payments">
                <group>
                    <div v-bind:class="{has_order: (pay.order_id > 1), pay_info: pay.id}" @click="toDetail(pay.order_id)">
                        <cell title="名称">{{pay.title}}</cell>
                        <cell :title="pay.trade_type | tradeType">
                            <span slot="value" v-bind:class="pay.trade_type">¥ {{pay.price / 100.0 | money}}</span>
                        </cell>
                        <cell title="时间">{{pay.created_at | time}}</cell>
                        <cell title="备注">{{pay.remark}}</cell>
                    </div>
                </group>
            </div>
        </div>
        <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
            <span slot="no-results">
                <divider>我是有底线的</divider>
            </span>
            <span slot="no-more">
                <divider>不要在扯了</divider>
            </span>
        </infinite-loading>
    </div>
</template>
<script>
    import { Group, Cell, Divider, Card, Search, Tab, TabItem, numberComma, dateFormat } from 'vux'
import InfiniteLoading from 'vue-infinite-loading'
export default {
    components: {
        Group, 
            Cell,
            Divider,
            Card,
            InfiniteLoading,
            Tab,
            TabItem,
            Search
    },
    data(){
        return {
            payments: [],
            page: {next_page: 0},
            type: null
        }
    },
    filters: {
        money(val) {
            let conver = Math.abs(val)
            let m = numberComma(conver, 2)
            if (m && m > 0) {
                return parseFloat(m).toFixed(2)
            } else {
                return 0
            }
        },
            tradeType(val){
                let type = ""
                switch(val){
                    case "expense":
                        type = "支出"
                        break;
                    case "income":
                        type = "收入"
                        break;
                }
                return type;
            },
            time(val) {
                return dateFormat(val * 1000, "YYYY-MM-DD HH:mm:ss")
            }
    },
    created() {
        this.$store.commit("storeState", false)

    },
    methods: {
        onInfinite(evt) {
            this.$http.get("payments.json", {params: {page: this.page.next_page, trade_type: this.type, limit: 10}}).then(res => {
                let data = res.data

                if (data.payments.length) {
                    if (evt === "toggle") {
                        this.payments = data.payments
                        this.page = data.page
                    } else {
                        this.payments = this.payments.concat(data.payments);
                        this.page = data.page
                    }
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
                    if (this.payments.length / 50 === 10 || data.page.next_page == null) {
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                    } 
                } else {
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");

                }
            })
        },
            toDetail(id) {
                if (id != null) {
                    this.$router.push("orders/" + id + "?type=detail")
                }
            },
            paymentEvent(type) {
                this.type = type;
                this.$http.get('payments.json', {params: {trade_type: type, limit: 10}}).then(res => {
                    this.$refs.infiniteLoading.$emit("$InfiniteLoading:reset");
                    let data = res.data
                    this.payments = res.data.payments
                    this.page = res.data.page
                    if (data.page.next_page == null) {
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
                    } else {
                        this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
                    }
                })
            }
    }
}

</script>
<style>
    .pay-header {
        top: 0;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }
    .panel-cash {
        margin-top: 50px;
    }
    .pay_info{
        padding: 8px;
    }
    .expense {
        color: red
    }
    .income {
        color: green
    }
    .pay_info .weui-cell {
        padding: 6px 5px;
        font-size: 14px;
    }
</style>
